﻿@{
    ViewBag.Title = "项目户型";
}
<div class="bread"><a href="">首页</a> &gt; <a href="projectlist.aspx?XMLB=6&amp;WYLX=8">地产项目</a> &gt;@ViewBag.PName</div>
<div id="menu">
    <h1>@ViewBag.PName</h1>
    <ul>
        <li><a href="/xiangmu/detail/@ViewBag.ID">项目主页</a></li>
        <li class="selected"><a href="/xiangmu/unit/@ViewBag.ID">户型</a></li>      
        <li><a href="/xiangmu/jiaotong/@ViewBag.ID">交通配套</a></li>
        <li><a href="/xiangce/photos/@ViewBag.ID">相册</a></li>
        <li><a href="/xiangmu/news/@ViewBag.ID">动态</a></li>
        <li class="specialItem"><a href="/xiangmu/detailx/@ViewBag.ID">详情</a></li>
    </ul>
</div>
<div id="oper">
    <!--hx-->
    <div id="hx_recomment" class="column">
        <div class="title">
            <h2>推荐户型</h2>
        </div>
        <div class="content">
            <div class="img_hx">
                <img id="" src="/uploadfiles/big/@ViewBag.HModel.HXYT" style="height:175px;width:200px;border-width:0px;">
            </div>
            <div class="description hxd">
                <h4>主推户型：@ViewBag.HModel.HXMS</h4>
                <p><span>@ViewBag.HModel.XMHX  @ViewBag.HModel.XMLX</span></p>
                <p>面积：@ViewBag.HModel.HXMJ</p>
                <p><strong>户型描述：</strong>
                    @ViewBag.HModel.HXMS
                </p>
            </div>
        </div>
    </div>
    <!--oper-->
    <div class="mainOper">      
        <ul>
        <li><b>@Model.XMTS</b></li>
            <li>项目特色：<a href="javascript:void(0)" onclick="LinkToLandscape.call(this)" title="@Model.XMLB">@Model.XMLB</a>
            </li>
            <li>开发商：@Model.KFS</li>
            <li>项目地址：@Model.XMDZ</li>
            <li>物业类型：@Model.WYLX</li>
            <li>开盘时间：@Model.KPSJ</li>
            </ul>
        <div class="bookprice">均价：<span>@Model.JJ</span></div>
        <div class="bookorder">
            <a href="@Model.TGDZ">                   
            <img src="/style/web/images/btn_order.jpg" id="" width="154" height="45"></a></div>
        <div class="contact">
            <img src="/style/web/images/icon_phone.jpg" width="39" height="39">
            <p>售楼处免费咨询电话<br><span>@Model.ZXDH</span></p>
        </div>
    </div>
</div>
<div id="hx_list" class="column">
    <div class="title">
        <h2>户型列表</h2>
    </div>
    <div class="content">
        <div id="kind_hx">
            <ul>
                <li class="selected"><a href="javascript:void(0)" onclick="Op.call(this,1)">按项目类型分类</a></li>
                <li><a href="javascript:void(0)" onclick="Op.call(this,0)">按项目户型分类</a></li>
            </ul>
        </div>
        <div class="kind">
            <ul id="tablist">
                <li id=""><a href="hx.aspx?HXID=20&amp;XMID=20&amp;XMLX=0">全部（0）</a></li>
            </ul>
        </div>
        <div class="hxImages" style="display:none">
            <ul id="hxlist">
                <li>数据加载中...</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        GetList(1);
    });

    //tab控制
    function Op(type) {
        $(this).parent().parent().children().removeClass("selected");
        $(this).parent().attr('class', "selected");
        GetList(type);
    }

    //get list data
    function GetList(type) {
        $(".hxImages").hide();
        $.ajax({
            url: "/xiangmu/get_hx_list_by_type",
            type: "POST",
            dataType: "json",
            data: {pid : @ViewBag.ID , type: type},
            timeout: 30000,
            beforeSend: function () {
                $("#tablist").html('<li id=""><a href="javascript:void(0)">准备数据中...</a></li>');
            },
            success: function (data) {
                if (data.list.length > 0) {
                    createHTML(data, type);
                }
                else {
                    $("#tablist").html("<li style='color:red;'>没有数据！</li>");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                dlg.Msg.Err(errorThrown);
            }
        });
    }

    // page call back function
    function pageselectCallback(page_index) {
        GetList(page_index);
    }

    //create html
    function createHTML(data,type) {
        var _html = "";
        $(data.list).each(function (i, item) {
            var _li = '<li id=""><a href="javascript:showlist(' + 0 + ')">全部（' + data.count + '）</a></li>';
            _li += '<li>';
            _li += '<a href="javascript:showlist(' + item.XMID + ',' + "'" + item.ATTR + "'" + ',' + type + ')">';
            _li += item.ATTR + '（' + item.Total + '）\
            </a></li>';
            _html += _li;
        });
        $("#tablist").html(_html);
    }

    function showlist(pid,attr,type)
    {
        $(".hxImages").show();
        $.getJSON("/xiangmu/get_hx_detail_by_type", { pid: pid, attr: attr, type: type },
            function (data) {
                var _li = "";
                if (data) {
                    $(data).each(function (i, item) {
                        _li += '<li><a href="javascript:void(0)">\
                        <img src="/uploadfiles/big/'+ item.HXYT +'" width="145" height="145"></a>\
                        <p><br> '+ item.HXMS + item.XMHX +'</p>\
                        面积：'+ item.HXMJ +'<br>\
                        均价：'+ item.HXJJ +'</li>';
                        });
                }
                else {
                    _li += "<li>没有数据...</li>";
                }
                $("#hxlist").html(_li);
            }
        );
    }
</script>